<template>
  <div style="font-size: 14px;">
      <!-- 学习中心main -->
    <div class="public_content study_content bg-color-gray9">
      <!-- 课件学习 -->
      <div class="public_content_right_l pull-left over-h">
        <div class="public_card">
          <div class="public_card_title bg-img-card fcolor-white">
            <span class="fsize-18 pl-15">学习课件</span> /
            <router-link :to="{path:'/studyCente-detail/courseWare'}" class="fcolor-white">更多</router-link>
          </div>
        </div>
        <div class="study_topic_content mt-15">
          <div class="public_card_hov_graytowhite pull-left w-360 mt-5 mr-15">
            <a>
              <img class="h-310 di-b center-block" src="@/assets/img/5ae9352377a6c.jpg" alt="">
              <p class="line-overf m-10 lh-18 fsize-12 font-yh fcolor-11">南通党建</p>
            </a>
          </div>
          <div class="pull-right mt-5 w-440">
            <div class="public_card_hov_graytowhite w-200 mb-5 mr-10 pull-left">
              <a class="see-details">
                <img src="@/assets/img/5ae93549d4c7b.jpg" class="h-120 w-all" alt="视频图片">
                <p class="line-overf fsize-12 font-yh lh-18 m-10 fcolor-11 w-170 material_over_point">学习资料整理第二卷内容速览</p>
              </a>
            </div>
            <div class="public_card_hov_graytowhite w-200 mb-5  pull-left">
              <a class="see-details">
                <img src="@/assets/img/5ae93549d4c7b.jpg" class="h-120 w-all" alt="视频图片">
                <p class="line-overf fsize-12 font-yh lh-18 m-10 fcolor-11  w-170 material_over_point">“智慧党建”升级</p>
              </a>
            </div>
            <div class="public_card_hov_graytowhite w-200 mb-5 mr-10 pull-left">
              <a class="see-details">
                <img src="@/assets/img/5ae93549d4c7b.jpg" class="h-120 w-all" alt="视频图片">
                <p class="line-overf fsize-12 font-yh lh-18 m-10 fcolor-11  w-170 material_over_point">“智慧党建”升级</p>
              </a>
            </div>
            <div class="public_card_hov_graytowhite w-200 mb-5  pull-left">
              <a class="see-details">
                <img src="@/assets/img/5ae93549d4c7b.jpg" class="h-120 w-all" alt="视频图片">
                <p class="line-overf fsize-12 font-yh lh-18 m-10 fcolor-11  w-170 material_over_point">学习资料整理第二卷内容速览</p>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!--课件排行开始-->
      <div class="public_content_right_r pull-right w-320 over-h">
        <div>
          <div class="public_card_title">
            <span class="fsize-16">课件排行</span>
            <a class="fcolor-99">&nbsp;更多&nbsp;&gt;&gt;</a>
          </div>
          <ul class="public_card_content over-h mt-20">
            <li>
              <a class="see-details" >南通党建</a>
            </li>
            <li>
              <a class="see-details" >学习资料整理第二卷内容速览</a>
            </li>
            <li>
              <a class="see-details" >“智慧党建”升级</a>
            </li>
            <li>
              <a class="see-details" >“智慧党建”升级</a>
            </li>
            <li>
              <a class="see-details" >atnc学习资料</a>
            </li>
            <li>
              <a class="see-details" >学习资料整理第二卷内容速览</a>
            </li>
            <li>
              <a class="see-details" > “智慧党建”升级</a>
            </li>
            <li>
              <a class="see-details" > 强化政治纪律 666</a>
            </li>
            <li>
              <a class="see-details" > 《习近平谈治国理政》第一卷内容速览</a>
            </li>
            <li>
              <a class="see-details" >“两学一做”</a>
            </li>
            <li>
              <a class="see-details">两学一做</a>
            </li>
          </ul>
        </div>
        <!--课件排行结束-->
      </div>
      <div class="clearfix"></div>
      <!--文章区开始-->
      <div class="study_artical mt-15 di-tb w-all tabel-fixed">
        <div class="study_artical_item">
          <a class="see-details">
            <div class="public_card_text_lr_img h-200 w-all">
              <div class="w-all h-all over-h">
                <img src="@/assets/img/5aded4967c854.jpg" class="di-b w-all  center-block" alt="文章图片">
              </div>
            </div>
            <p class="fsize-12 m-10 material_over_point w-130">atnc学习资料</p>
          </a>
        </div>
        <div class="study_artical_item">
          <a class="see-details">
            <div class="public_card_text_lr_img h-200 w-all">
              <div class="w-all h-all over-h">
                <img src="@/assets/img/5aded4967c854.jpg" class="di-b w-all  center-block" alt="文章图片">
              </div>
            </div>
            <p class="fsize-12 m-10 material_over_point w-130"> “智慧党建”升级</p>
          </a>
        </div>
        <div class="study_artical_item">
          <a class="see-details">
            <div class="public_card_text_lr_img h-200 w-all">
              <div class="w-all h-all over-h">
                <img src="@/assets/img/5aded4967c854.jpg" class="di-b w-all  center-block" alt="文章图片">
              </div>
            </div>
            <p class="fsize-12 m-10 material_over_point w-130"> 强化政治纪律 666</p>
          </a>
        </div>
        <div class="study_artical_item">
          <a class="see-details">
            <div class="public_card_text_lr_img h-200 w-all">
              <div class="w-all h-all over-h">
                <img src="@/assets/img/5aded4967c854.jpg" class="di-b w-all  center-block" alt="文章图片">
              </div>
            </div>
            <p class="fsize-12 m-10 material_over_point w-130"> 《习近平谈治国理政》第一卷内容速览</p>
          </a>
        </div>
        <div class="study_artical_item">
          <a class="see-details">
            <div class="public_card_text_lr_img h-200 w-all">
              <div class="w-all h-all over-h">
                <img src="@/assets/img/5aded4967c854.jpg" class="di-b w-all  center-block" alt="文章图片">
              </div>
            </div>
            <p class="fsize-12 m-10 material_over_point w-130">“两学一做”</p>
          </a>
        </div>
        <div class="study_artical_item">
          <a class="see-details">
            <div class="public_card_text_lr_img h-200 w-all">
              <div class="w-all h-all over-h">
                <img src="@/assets/img/5aded4967c854.jpg" class="di-b w-all  center-block" alt="文章图片">
              </div>
            </div>
            <p class="fsize-12 m-10 material_over_point w-130">两学一做</p>
          </a>
        </div>
        <div class="study_artical_item">
          <a class="see-details">
            <div class="public_card_text_lr_img h-200 w-all">
              <div class="w-all h-all over-h">
                <img src="@/assets/img/5aded4967c854.jpg" class="di-b w-all  center-block" alt="文章图片">
              </div>
            </div>
            <p class="fsize-12 m-10 material_over_point w-130">学习资料</p>
          </a>
        </div>
      </div>
      <div class="study_exam mt-25">
			<!--考试中心开始-->
      <div class="w-830 pull-left">
        <div class="public_card">
          <div class="public_card_title bg-img-card fcolor-white">
            <span class="fsize-18 pl-15">考试中心</span> /
            <a class="fcolor-white">更多</a>
          </div>
          <div class="study_topic_content mt-15">
            <div class="public_hover_shadow w-180 h-220 pull-left mr-20 mb-10 hr-s-f1f1f1 over-h">
              <a href="javascript:;" class="di-b see-details">
                <img src="@/assets/img/5adaec797b391.jpg" class="h-120 di-b center-block" alt="考试中心图片">
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">俩学一做试题</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-04-18</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5 article_over_one">发起人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">参加考试</div>
              </a>
            </div>
            <div class="public_hover_shadow w-180 h-220 pull-left mr-20 mb-10 hr-s-f1f1f1 over-h">
              <a href="javascript:;" class="di-b see-details">
                <img src="@/assets/img/5adaec797b391.jpg" class="h-120 di-b center-block" alt="考试中心图片">
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">党员发展考试</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-01-30</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5 article_over_one">发起人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">参加考试</div>
              </a>
            </div>
            <div class="public_hover_shadow w-180 h-220 pull-left mr-20 mb-10 hr-s-f1f1f1 over-h">
              <a href="javascript:;" class="di-b see-details">
                <img src="@/assets/img/5adaec797b391.jpg" class="h-120 di-b center-block" alt="考试中心图片">
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">关于党的十九大试题</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-01-25</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5 article_over_one">发起人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">参加考试</div>
              </a>
            </div>
            <div class="public_hover_shadow w-180 h-220 pull-left mr-20 mb-10 hr-s-f1f1f1 over-h">
              <a href="javascript:;" class="di-b see-details">
                <img src="@/assets/img/5adaec797b391.jpg" class="h-120 di-b center-block" alt="考试中心图片">
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">中国精准扶贫</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2017-12-22</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5 article_over_one">发起人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">参加考试</div>
              </a>
            </div>
            <div class="public_hover_shadow w-180 h-220 pull-left mr-20 mb-10 hr-s-f1f1f1 over-h">
              <a href="javascript:;" class="di-b see-details">
                <img src="@/assets/img/5adaec797b391.jpg" class="h-120 di-b center-block" alt="考试中心图片">
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">党员发展对象参考试题</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2017-12-14</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5 article_over_one">发起人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">参加考试</div>
              </a>
            </div>
            <div class="public_hover_shadow w-180 h-220 pull-left mr-20 mb-10 hr-s-f1f1f1 over-h">
              <a href="javascript:;" class="di-b see-details">
                <img src="@/assets/img/5adaec797b391.jpg" class="h-120 di-b center-block" alt="考试中心图片">
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">党员发展对象参考试题</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2017-11-22</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5 article_over_one">发起人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">参加考试</div>
              </a>
            </div>
            <div class="public_hover_shadow w-180 h-220 pull-left mr-20 mb-10 hr-s-f1f1f1 over-h">
              <a href="javascript:;" class="di-b see-details">
                <img src="@/assets/img/5adaec797b391.jpg" class="h-120 di-b center-block" alt="考试中心图片">
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">党员发展对象参考试题</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2017-11-21</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5 article_over_one">发起人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">参加考试</div>
              </a>
            </div>
            <div class="public_hover_shadow w-180 h-220 pull-left mr-20 mb-10 hr-s-f1f1f1 over-h">
              <a href="javascript:;" class="di-b see-details">
                <img src="@/assets/img/5adaec797b391.jpg" class="h-120 di-b center-block" alt="考试中心图片">
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">创城</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2017-09-13</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5 article_over_one">发起人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">参加考试</div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!--考试中心结束-->

      <!--考试动态开始-->
      <div class="pull-right w-330 h-500 hr-s-ff9776 bcon">
        <div class="h-40 lh-40 fcolor-white bg-color-ff9776 pl-20">考试动态</div>
        <div class="list_lh mt-20 h-420 wrapper" ref="scroll">
          <ul style="margin-top: -19px;font-size: 14px;" class="content">
          <li class="pl-15 pr-15 pt-15">
              <p class="">
                <a href="javascript:;">
                  </a></p><div class="di-ib w-90b over-h h-35 fsize-14"><a href="javascript:;">
                    <span class="fcolor-307eff">田鑫</span> 参加《党员发展对象参考试题》考试
                  </a></div><a href="javascript:;">
                  <div class="pull-right mt-10 fcolor-ff9776">+0</div>
                </a>
              <p></p>
            </li><li class="pl-15 pr-15 pt-15">
              <p class="">
                <a href="javascript:;">
                  </a></p><div class="di-ib w-90b over-h h-35 fsize-14"><a href="javascript:;">
                    <span class="fcolor-307eff">王春燕</span> 参加《党员发展对象参考试题》考试
                  </a></div><a href="javascript:;">
                  <div class="pull-right mt-10 fcolor-ff9776">+0</div>
                </a>
              <p></p>
            </li><li class="pl-15 pr-15 pt-15">
              <p class="">
                <a href="javascript:;">
                  </a></p><div class="di-ib w-90b over-h h-35 fsize-14"><a href="javascript:;">
                    <span class="fcolor-307eff">王一帆</span> 参加《党员发展对象参考试题》考试
                  </a></div><a href="javascript:;">
                  <div class="pull-right mt-10 fcolor-ff9776">+0</div>
                </a>
              <p></p>
            </li><li class="pl-15 pr-15 pt-15">
              <p class="">
                <a href="javascript:;">
                  </a></p><div class="di-ib w-90b over-h h-35 fsize-14"><a href="javascript:;">
                    <span class="fcolor-307eff">闫红霞</span> 参加《关于党的十九大试题》考试
                  </a></div><a href="javascript:;">
                  <div class="pull-right mt-10 fcolor-ff9776">+0</div>
                </a>
              <p></p>
            </li><li class="pl-15 pr-15 pt-15">
              <p class="">
                <a href="javascript:;">
                  </a></p><div class="di-ib w-90b over-h h-35 fsize-14"><a href="javascript:;">
                    <span class="fcolor-307eff">杨光</span> 参加《党员发展考试》考试
                  </a></div><a href="javascript:;">
                  <div class="pull-right mt-10 fcolor-ff9776">+5</div>
                </a>
              <p></p>
            </li><li class="pl-15 pr-15 pt-15">
              <p class="">
                <a href="javascript:;">
                  </a></p><div class="di-ib w-90b over-h h-35 fsize-14"><a href="javascript:;">
                    <span class="fcolor-307eff">cjgly</span> 参加《党员发展考试》考试
                  </a></div><a href="javascript:;">
                  <div class="pull-right mt-10 fcolor-ff9776">+8</div>
                </a>
              <p></p>
            </li><li class="pl-15 pr-15 pt-15">
              <p class="">
                <a href="javascript:;">
                  </a></p><div class="di-ib w-90b over-h h-35 fsize-14"><a href="javascript:;">
                    <span class="fcolor-307eff">韩丽</span> 参加《党员发展考试》考试
                  </a></div><a href="javascript:;">
                  <div class="pull-right mt-10 fcolor-ff9776">+9</div>
                </a>
              <p></p>
            </li><li class="pl-15 pr-15 pt-15">
              <p class="">
                <a href="javascript:;">
                  </a></p><div class="di-ib w-90b over-h h-35 fsize-14"><a href="javascript:;">
                    <span class="fcolor-307eff">何晓东</span> 参加《党员发展考试》考试
                  </a></div><a href="javascript:;">
                  <div class="pull-right mt-10 fcolor-ff9776">+1</div>
                </a>
              <p></p>
            </li><li class="pl-15 pr-15 pt-15">
              <p class="">
                <a href="javascript:;">
                  </a></p><div class="di-ib w-90b over-h h-35 fsize-14"><a href="javascript:;">
                    <span class="fcolor-307eff">谭靓</span> 参加《党员发展对象参考试题》考试
                  </a></div><a href="javascript:;">
                  <div class="pull-right mt-10 fcolor-ff9776">+0</div>
                </a>
              <p></p>
            </li><li class="pl-15 pr-15 pt-15">
              <p class="">
                <a href="javascript:;">
                  </a></p><div class="di-ib w-90b over-h h-35 fsize-14"><a href="javascript:;">
                    <span class="fcolor-307eff">谭丽</span> 参加《中国精准扶贫》考试
                  </a></div><a href="javascript:;">
                  <div class="pull-right mt-10 fcolor-ff9776">+0</div>
                </a>
              <p></p>
            </li><li class="pl-15 pr-15 pt-15">
              <p class="">
                <a href="javascript:;">
                  </a></p><div class="di-ib w-90b over-h h-35 fsize-14"><a href="javascript:;">
                    <span class="fcolor-307eff">唐晋升</span> 参加《中国精准扶贫》考试
                  </a></div><a href="javascript:;">
                  <div class="pull-right mt-10 fcolor-ff9776">+0</div>
                </a>
              <p></p>
            </li><li class="pl-15 pr-15 pt-15">
              <p class="">
                <a href="javascript:;">
                  </a></p><div class="di-ib w-90b over-h h-35 fsize-14"><a href="javascript:;">
                    <span class="fcolor-307eff">田小柳</span> 参加《中国精准扶贫》考试
                  </a></div><a href="javascript:;">
                  <div class="pull-right mt-10 fcolor-ff9776">+0</div>
                </a>
              <p></p>
            </li>
            </ul>
        </div>
      </div>
      <!--考试动态结束-->

      <div class="clearfix"></div>
      <!--学习笔记开始-->
      <div class="study_note mt-25">
        <div class="public_card_title bg-img-card fcolor-white ">
          <span class="pl-15 fsize-18">学习笔记</span>　/
          <a class="fcolor-white">更多</a>
        </div>
        <div class="mt-25 mb-5 fsize-18 fcolor-33 mb-20">
          <i class="di-ib h-18 w-4 bg-color-ff9776 mr-10"></i>课件笔记
        </div>
        <ul class="public_card_text_content ">
          <li class="public_card_text_lr w-370 boxsize-b mr-15 mb-10">
            <a class="see-details">
              <div class="public_card_text_lr_img h-all pull-left w-110 mr-15">
                <div class="w-all h-all over-h po-re">
                  <img src="@/assets/img/5aded4967c854.jpg" class="di-b h-all center-ver-hor" alt="图书图片">
                </div>
              </div>
              <div class="public_card_text_lr_txt">
                <div class="mb-30 article_over_one">参加学习笔记学习笔记</div>
                <div class="public_card_text_lr_txt_content fcolor-99 article_over_one">名称：学习笔记</div>
                <div class="public_card_text_lr_txt_content fcolor-99 article_over_one">作者：cjgly</div>
                <div class="mt-20">
                  <span class="public_card_text_lr_txt_content fcolor-ff9776">2018-06-05 09:42:25</span>
                  <span class="public_card_text_lr_btn">笔记详情</span>
                </div>
              </div>
            </a>
          </li>
          <li class="public_card_text_lr w-370 boxsize-b mr-15 mb-10">
            <a class="see-details" href="ipam_note_info/notes_id/180.html">
              <div class="public_card_text_lr_img h-all pull-left w-110 mr-15">
                <div class="w-all h-all over-h po-re">
                  <img src="@/assets/img/5aded4967c854.jpg" class="di-b h-all center-ver-hor" alt="图书图片">
                </div>
              </div>
              <div class="public_card_text_lr_txt">
                <div class="mb-30 article_over_one">参加坚定不移推进军队全面从严治党1学习笔记</div>
                <div class="public_card_text_lr_txt_content fcolor-99 article_over_one">名称：坚定不移推进军队全面从严治党1</div>
                <div class="public_card_text_lr_txt_content fcolor-99 article_over_one">作者：cjgly</div>
                <div class="mt-20">
                  <span class="public_card_text_lr_txt_content fcolor-ff9776">2018-04-25 19:14:13</span>
                  <span class="public_card_text_lr_btn">笔记详情</span>
                </div>
              </div>
            </a>
          </li>
          <li class="public_card_text_lr w-370 boxsize-b mr-15 mb-10">
            <a class="see-details" href="ipam_note_info/notes_id/182.html">
              <div class="public_card_text_lr_img h-all pull-left w-110 mr-15">
                <div class="w-all h-all over-h po-re">
                  <img src="@/assets/img/5aded4967c854.jpg" class="di-b h-all center-ver-hor" alt="图书图片">
                </div>
              </div>
              <div class="public_card_text_lr_txt">
                <div class="mb-30 article_over_one">参加坚定不移推进军队全面从严治党学习笔记</div>
                <div class="public_card_text_lr_txt_content fcolor-99 article_over_one">名称：坚定不移推进军队全面从严治党</div>
                <div class="public_card_text_lr_txt_content fcolor-99 article_over_one">作者：cjgly</div>
                <div class="mt-20">
                  <span class="public_card_text_lr_txt_content fcolor-ff9776">2018-04-24 14:54:17</span>
                  <span class="public_card_text_lr_btn">笔记详情</span>
                </div>
              </div>
            </a>
          </li>
          <li class="public_card_text_lr w-370 boxsize-b mr-15 mb-10">
            <a class="see-details" href="ipam_note_info/notes_id/199.html">
              <div class="public_card_text_lr_img h-all pull-left w-110 mr-15">
                <div class="w-all h-all over-h po-re">
                  <img src="@/assets/img/5aded4967c854.jpg" class="di-b h-all center-ver-hor" alt="图书图片">
                </div>
              </div>
              <div class="public_card_text_lr_txt">
                <div class="mb-30 article_over_one">参加《习近平谈治国理政》第二卷内容速览8学习笔记</div>
                <div class="public_card_text_lr_txt_content fcolor-99 article_over_one">名称：《习近平谈治国理政》第二卷内容速览8</div>
                <div class="public_card_text_lr_txt_content fcolor-99 article_over_one">作者：cjgly</div>
                <div class="mt-20">
                  <span class="public_card_text_lr_txt_content fcolor-ff9776">2018-04-17 11:45:07</span>
                  <span class="public_card_text_lr_btn">笔记详情</span>
                </div>
              </div>
            </a>
          </li>
          <li class="public_card_text_lr w-370 boxsize-b mr-15 mb-10">
            <a class="see-details" href="ipam_note_info/notes_id/175.html">
              <div class="public_card_text_lr_img h-all pull-left w-110 mr-15">
                <div class="w-all h-all over-h po-re">
                  <img src="@/assets/img/5aded4967c854.jpg" class="di-b h-all center-ver-hor" alt="图书图片">
                </div>
              </div>
              <div class="public_card_text_lr_txt">
                <div class="mb-30 article_over_one">参加坚定不移推进军队全面从严治党学习笔记</div>
                <div class="public_card_text_lr_txt_content fcolor-99 article_over_one">名称：坚定不移推进军队全面从严治党</div>
                <div class="public_card_text_lr_txt_content fcolor-99 article_over_one">作者：cjgly</div>
                <div class="mt-20">
                  <span class="public_card_text_lr_txt_content fcolor-ff9776">2018-03-29 15:24:09</span>
                  <span class="public_card_text_lr_btn">笔记详情</span>
                </div>
              </div>
            </a>
          </li>
          <li class="public_card_text_lr w-370 boxsize-b mr-15 mb-10">
            <a class="see-details" href="ipam_note_info/notes_id/179.html">
              <div class="public_card_text_lr_img h-all pull-left w-110 mr-15">
                <div class="w-all h-all over-h po-re">
                  <img src="@/assets/img/5aded4967c854.jpg" class="di-b h-all center-ver-hor" alt="图书图片">
                </div>
              </div>
              <div class="public_card_text_lr_txt">
                <div class="mb-30 article_over_one">参加坚定不移推进军队全面从严治党学习笔记</div>
                <div class="public_card_text_lr_txt_content fcolor-99 article_over_one">名称：坚定不移推进军队全面从严治党</div>
                <div class="public_card_text_lr_txt_content fcolor-99 article_over_one">作者：cjgly</div>
                <div class="mt-20">
                  <span class="public_card_text_lr_txt_content fcolor-ff9776">2018-03-28 17:03:18</span>
                  <span class="public_card_text_lr_btn">笔记详情</span>
                </div>
              </div>
            </a>
          </li>
        </ul>
        <div class="mt-25 mb-20 fsize-18 fcolor-33">
          <i class="di-ib h-18 w-4 bg-color-ff9776 mr-10"></i>视频笔记
        </div>
        <div class="di-tb w-all">
          <div class="study_video_note" style="width:20%">
            <div class="public_hover_shadow w-all h-all hr-s-f1f1f1">
              <a href="ipam_note_info/notes_id/201.html" class="di-b see-details">
                <div class="h-120 over-h po-re">
                  <img src="@/assets/img/5adaec797b391.jpg" class="w-all di-b center-ver-hor" alt="考试中心图片">
                </div>
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">参加党小组会议笔记</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-04-24 14:53:12</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5">记录人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">笔记详情</div>
              </a>
            </div>
          </div>
          <div class="study_video_note" style="width:20%">
            <div class="public_hover_shadow w-all h-all hr-s-f1f1f1">
              <a href="ipam_note_info/notes_id/200.html" class="di-b see-details">
                <div class="h-120 over-h po-re">
                  <img src="@/assets/img/5adaec797b391.jpg" class="w-all di-b center-ver-hor" alt="考试中心图片">
                </div>
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">参加三会一课会议笔记</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-04-20 16:15:48</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5">记录人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">笔记详情</div>
              </a>
            </div>
          </div>
          <div class="study_video_note" style="width:20%">
            <div class="public_hover_shadow w-all h-all hr-s-f1f1f1">
              <a href="ipam_note_info/notes_id/194.html" class="di-b see-details">
                <div class="h-120 over-h po-re">
                  <img src="@/assets/img/5adaec797b391.jpg" class="w-all di-b center-ver-hor" alt="考试中心图片">
                </div>
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">中国精准扶贫</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-03-29 11:21:41</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5">记录人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">笔记详情</div>
              </a>
            </div>
          </div>
          <div class="study_video_note" style="width:20%">
            <div class="public_hover_shadow w-all h-all hr-s-f1f1f1">
              <a href="ipam_note_info/notes_id/195.html" class="di-b see-details">
                <div class="h-120 over-h po-re">
                  <img src="@/assets/img/5adaec797b391.jpg" class="w-all di-b center-ver-hor" alt="考试中心图片">
                </div>
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">中国精准扶贫</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-03-29 11:21:41</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5">记录人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">笔记详情</div>
              </a>
            </div>
          </div>
          <div class="study_video_note" style="width:20%">
            <div class="public_hover_shadow w-all h-all hr-s-f1f1f1">
              <a href="ipam_note_info/notes_id/196.html" class="di-b see-details">
                <div class="h-120 over-h po-re">
                  <img src="@/assets/img/5adaec797b391.jpg" class="w-all di-b center-ver-hor" alt="考试中心图片">
                </div>
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">中国精准扶贫</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-03-29 11:21:41</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5">记录人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">笔记详情</div>
              </a>
            </div>
          </div>
        </div>
        <div class="mt-25 mb-20 fsize-18 fcolor-33">
          <i class="di-ib h-18 w-4 bg-color-ff9776 mr-10"></i>日常笔记
        </div>
        <div class="di-tb w-all">
          <div class="study_daily_note" style="width:20%">
            <div class="public_hover_shadow w-all h-all hr-s-f1f1f1">
              <a href="ipam_note_info/notes_id/193.html" class="di-b see-details">
                <div class="h-120 over-h po-re">
                  <img src="@/assets/img/5adaec797b391.jpg" class="w-all di-b center-ver-hor" alt="考试中心图片">
                </div>
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">中国精准扶贫</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-03-13 19:29:22</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5">记录人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">笔记详情</div>
              </a>
            </div>
          </div>
          <div class="study_daily_note" style="width:20%">
            <div class="public_hover_shadow w-all h-all hr-s-f1f1f1">
              <a href="ipam_note_info/notes_id/191.html" class="di-b see-details">
                <div class="h-120 over-h po-re">
                  <img src="@/assets/img/5adaec797b391.jpg" class="w-all di-b center-ver-hor" alt="考试中心图片">
                </div>
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">以“互联网 ”思维引领 “智慧党建”升级</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-02-05 13:59:45</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5">记录人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">笔记详情</div>
              </a>
            </div>
          </div>
          <div class="study_daily_note" style="width:20%">
            <div class="public_hover_shadow w-all h-all hr-s-f1f1f1">
              <a href="ipam_note_info/notes_id/190.html" class="di-b see-details">
                <div class="h-120 over-h po-re">
                  <img src="@/assets/img/5adaec797b391.jpg" class="w-all di-b center-ver-hor" alt="考试中心图片">
                </div>
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">坚定不移推进军队全面从严治党</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-01-30 16:05:19</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5">记录人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">笔记详情</div>
              </a>
            </div>
          </div>
          <div class="study_daily_note" style="width:20%">
            <div class="public_hover_shadow w-all h-all hr-s-f1f1f1">
              <a href="ipam_note_info/notes_id/189.html" class="di-b see-details">
                <div class="h-120 over-h po-re">
                  <img src="@/assets/img/5adaec797b391.jpg" class="w-all di-b center-ver-hor" alt="考试中心图片">
                </div>
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">坚定不移推进军队全面从严治党</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-01-30 16:00:48</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5">记录人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">笔记详情</div>
              </a>
            </div>
          </div>
          <div class="study_daily_note" style="width:20%">
            <div class="public_hover_shadow w-all h-all hr-s-f1f1f1">
              <a href="ipam_note_info/notes_id/184.html" class="di-b see-details">
                <div class="h-120 over-h po-re">
                  <img src="@/assets/img/5adaec797b391.jpg" class="w-all di-b center-ver-hor" alt="考试中心图片">
                </div>
                <div>
                  <p class="center-text fsize-14 fcolor-33 m-5 article_over_one">坚定不移推进军队全面从严治党</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 ">时间：2018-01-26 10:00:56</p>
                  <p class="fsize-12 fcolor-99 lh-18 pl-5 pb-5">记录人：cjgly</p>
                </div>
                <div class="study_topic_content_box_button h-30 hr-st-ebebeb center-text lh-28 fcolor-ff9776 fsize-12">笔记详情</div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    
  </div>
</template>

<script>
  import BetterScroll from 'better-scroll'
  export default {
    data() {
      return {
        actives: 0
      }
    },
    mounted() {
      let wapper = document.querySelector('.wrapper');
      this.scroll = new BetterScroll(wapper, {
        scrollX: false,
        scrollY: true,
        snap: {
          loop: true,
          threshold: 0.1,
          speed: 400
        }
      });
    }
  }
</script>

<style scoped>
  a {
    cursor: pointer;
  }
  .public_hover_shadow:hover{
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.14);
  }
  .study_topic_content {
    width: 820px;
  }
  .public_card_hov_graytowhite {
    overflow: hidden;
    background-color: #F8F4ED;
  }
  .public_card_hov_graytowhite:hover{
    background: #fff;
    box-shadow: 0 0 5px 0 rgba(0 ,0 ,0 ,0.14) ;
  }
  ul.public_card_content, ul.public_card_content > li {
    list-style: disc;
    color: #d9d9d9;
  }
  ul.public_card_content, ol.public_card_content {
    padding-left: 22px;
  }

  .public_card_content li:first-child, .threeitems .public_card_content li:nth-of-type(2), .threeitems .public_card_content li:nth-of-type(3) {
    list-style: none;
    position: relative;
  }

  .public_content_right_r ul.public_card_content li {
    line-height: 33px;
  }
  .public_card_content li {
    counter-increment: chapter;
    font-size: 14px;
    text-align: left;
  }
  .public_card_content a {
    color: #333;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 列表前三项是水滴样式 */
.public_card_content li:first-child, .public_card_content li:nth-of-type(2),
.public_card_content li:nth-of-type(3){
    list-style: none;
    position: relative;
}
.public_card_content li:first-child a:before,
.public_card_content li:nth-of-type(2) a:before,
.public_card_content li:nth-of-type(3) a:before{
    content: counter(chapter);
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    top: 9px;
    left: -22px;
    z-index: 1;
    font-size: 12px;
    line-height: 15px;
    /*background: #6ccddf;*/
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    color: #fff;
    text-align: center;
}
.public_card_content li:first-child a:after,
.public_card_content li:nth-of-type(2) a:after,
.public_card_content li:nth-of-type(3) a:after {
    content: "";
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 4px 4px 4px 5px;
    /*border-color: transparent transparent transparent #6ccddf;*/
    display: block;
    position: absolute;
    top: 13px;
    left: -8px;
}
.public_card_content li:first-child a:before{
    background: #ff3032;
}
.public_card_content li:nth-of-type(2) a:before{
    background: #ff9776;
}
.public_card_content li:nth-of-type(3) a:before{
    background: #ffba66;
}
.public_card_content li:first-child a:after{
    border-color: transparent transparent transparent #ff3032;
}
.public_card_content li:nth-of-type(2) a:after{
    border-color: transparent transparent transparent #ff9776;
}
.public_card_content li:nth-of-type(3) a:after{
    border-color: transparent transparent transparent #ffba66;
}
/* 列表前三项是水滴样式 */
.public_card_text_lr_img {
  box-sizing: border-box;
  padding: 4px;
}
.study_artical_item {
  display: table-cell;
  height: 246px;
  padding: 6px;
  background: #F8F4ED;
  background-clip: content-box;
}

.wrapper{
  display: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow:hidden;
}

.article_over_one {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.public_card_text_lr {
  display: inline-block;
  /* width: calc( (100% - 18px) / 4 ); */
  height: 162px;
  /* margin-top: 12px; */
}
.public_card_text_lr > a {
  display: block;
  height: 100%;
  width: 100%;
}
.article_over_one {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.public_card_text_lr_txt {
    height: 162px;
    box-sizing: border-box;
    /* margin-left: 110px; */
    padding: 6px 16px 12px 12px;
    font-size: 14px;
    color: #333;
}
.public_card_text_lr_txt_content {
  font-size: 12px;
  /* color: #999; */
  line-height: 22px;
}
.public_card_text_lr_btn {
  float: right;
  display: inline-block;
  width: 64px;
  height: 24px;
  text-align: center;
  line-height: 22px;
  border-radius: 3px;
  color: #fff;
  background: #ff3032;
}
.public_card_text_lr:hover{
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.14);
}
.study_video_note, .study_daily_note {
  display: table-cell;
  height: 220px;
  padding: 6px;
}
</style>